<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑博客</title>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/WriteBlog.css">
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../editormd/css/editormd.min.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../editormd/editormd.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav nav-title">
                <li><a href="#" style="font-weight: bold;color: #999999;font-size: 25px">编辑博客</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="user-head-icon">
                    <img src="" class="user-head" alt="">
                    <div class="drop-box" style="display: none;">
                        <div class="drop-nickname-box">
                            <div class="drop-nickname">
                            </div>
                            <div style="width: 100%;height: 2px">
                                <hr style="width: 100%;">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--书写文章界面-->
<div class="write-blog-box">
    <div class="write-blog-content-box">
        <!--文章标题-->
        <div class="blog-title-box">
            <div class="blog-title-input">
                <label>
                    <input type="text" placeholder="请输入文章标题 (5~100个字)" class="blog-title">
                </label>
            </div>
        </div>

        <!--文章内容-->
        <div id="md-content" style="z-index: 1 !important;">
            <label>
                <textarea></textarea>
            </label>
        </div>

        <!--文章属性-->
        <div class="blog-settings-box">
            <!--文章专栏-->
            <div class="blog-column-box option-box">
                <div class="column-title">分类专栏：</div>
                <div class="column-box">
                    <!--选中分类专栏列表-->
                    <div class="save-column-list">

                    </div>
                    <!--新建分类专栏按钮-->
                    <div class="new-column-btn-box">
                        <button class="new-column-btn">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加分类专栏
                        </button>
                    </div>
                    <!--新建分类专栏界面-->
                    <div class="new-column-box">
                        <div class="new-column-in-box">
                            <!--关闭按钮-->
                            <div class="new-column-icon-box">
                                <div class="new-column-title">
                                    专栏
                                </div>
                                <div class="new-column-icon-in-box">
                                    <img class="new-column-icon"  src="../static/imgs/关闭.png" alt="">
                                </div>
                            </div>
                            <div class="add-column-box">
                                <div class="add-column-input-box">
                                    <label>
                                        <input type="text" class="add-column-input" placeholder="提示：你可以输入你想添加的专栏">
                                    </label>
                                </div>
                                <div class="add-column-info-box">
                                    <div class="add-column-list">

                                    </div>
                                </div>
                                <div class="add-column-btn-box">
                                    <button class="add-column-btn label-in-btn">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                                    </button>
                                    <button class="add-column-save-btn label-in-btn">
                                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--文章标签-->
            <div class="blog-label-box option-box">
                <div class="label-title"> 文章标签：</div>
                <div class="label-box">
                    <!--选中标签列表-->
                    <div class="save-label-list">

                    </div>
                    <!--添加标签按钮-->
                    <div class="add-label-btn-box">
                        <button class="add-label-btn">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加文章标签
                        </button>
                    </div>
                    <!--添加标签界面-->
                    <div class="add-label-box">
                        <div class="add-label-in-box">
                            <!--关闭按钮-->
                            <div class="new-column-icon-box">
                                <div class="new-column-title">
                                    标签
                                </div>
                                <div class="new-column-icon-in-box">
                                    <img class="new-label-icon"  src="../static/imgs/关闭.png" alt="">
                                </div>
                            </div>
                            <div class="search-label-box">
                                <div class="add-label-input-box">
                                    <label>
                                        <input type="text" class="add-label-input" placeholder="提示：你可以输入你想搜索/添加的标签">
                                    </label>
                                </div>
                                <div class="add-label-info-box">
                                    <div class="add-label-list">

                                    </div>
                                </div>
                                <div class="label-btn-box">
                                    <button class="add-label-btn-in label-in-btn">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>自定义
                                    </button>
                                    <button class="search-label-btn label-in-btn">
                                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>搜索
                                    </button>
                                    <button class="save-label-btn label-in-btn">
                                        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--是否原创-->
            <div class="is-original-box option-box">
                <div class="settings-title">文章类型：</div>
                <div class="article-type">
                    <label class="radio-inline article-type-option">
                        <input type="radio" name="article-type" value="原创" checked="checked">原创
                    </label>
                    <label class="radio-inline article-type-option">
                        <input type="radio" name="article-type" value="转载">转载
                    </label>
                </div>
            </div>
            <!--发布按钮-->
            <div class="publish-blog-box option-box">
                <button class="publish-blog-btn">保存博客</button>
            </div>
        </div>
    </div>
</div>
<script>
    //初始化Markdown编辑器
    let contentEditor;
    var blog_id;
    $(function() {

        /*获取头像*/
        const href=decodeURI(window.location.href);//译码
        let hrefIndex=href.split('?blog_id=');
        $(".user-head").attr("src",window.localStorage.getItem("avatar"));
        blog_id=hrefIndex[1];


        let url='http://localhost:8080/articleServlet?action=get_blog_info'
        axios({
            method:"GET",
            url:url,
            params:{
              id:blog_id
            }
        }).then(function (res) {
              console.log(res);
            let data = res['data'];
            $(".blog-title").val(data['data']['article_title']);
            let is_original=data['data']['is_original'];
            if(is_original==="原创"){
                $('input:radio[value="原创"]').attr("checked","checked");
            }else{
                $('input:radio[value="转载"]').attr("checked","checked");
            }
            get_article_label();
            get_article_column();
            /*markdown编辑器初始化*/
            contentEditor = editormd("md-content", {
                width   : "100%",//宽度
                height  : 1000,//高度
                appendMarkdown:data['data']['article_content'],
                imageUpload: true,
                imageFormats: ["jpg","jpeg","gif","png","bmp","webp"],
                imageUploadURL: "http://localhost:8080/uploadServlet?action=local_upload",
                syncScrolling : "single",//单滚动条
                path    : "../editormd/lib/"//依赖的包路径
            });
        })

    });
     /*初始化文章标签*/
     function get_article_label() {
         let url='http://localhost:8080/articleServlet?action=get_blog_label'
         axios({
             method: "GET",
             url:url,
             params:{
                 blog_id:blog_id,
             }
         }).then(function (res) {
             let data=res['data']['data'];
             $(".save-label-list").empty();
             for(let i in data){
                 push_label_item(data[i]);
             }
             $(".save-label-item").click(function () {
                 $(this).remove();
             })
         })
     }

     /*获取文章专栏*/
     function get_article_column() {
         let url='http://localhost:8080/articleServlet?action=get_blog_column'
         axios({
             method: "GET",
             url:url,
             params:{
                 blog_id:blog_id,
             }
         }).then(function (res) {
             let data=res['data']['data'];
             $(".save-column-list").empty();
             for(let i in data){
                 push_save_column_item(data[i]);
             }
             /*删除已选中的分类专栏*/
             $(".save-column-item").click(function () {
                 $(this).remove();
             })
         })
     }

    /*打开添加标签界面*/
    $(".add-label-btn").click(function () {
        $(".add-label-box").show();
    })

    /*关闭添加标签界面*/
    $(".new-label-icon").click(function () {
        $(".add-label-box").hide();
    })

    /*分类专栏构造器*/
    function push_column_item(column_name) {
        $(".add-column-list").append(`<div class="add-column-item">
                 <label>
                     <input type="checkbox" name="column_check" value=${column_name}>
                         ${column_name}
                 </label>
             </div>`);
    }

    /*展示分类专栏构造器*/
    function push_save_column_item(column_name) {
        $(".save-column-list").append(`<div class="save-column-item" column_name=${column_name}>
            ${column_name}
         </div>`);
    }

    /*新增分类专栏按钮*/
    $(".add-column-btn").click(function () {
        if($(".add-column-input").val()==="")
        {
            modal("不能添加空专栏！");
        }else{
            let add_column=$(".add-column-input").val();
            let url='http://localhost:8080/articleServlet?action=check_column'
            axios({
                method:"GET",
                url:url,
                params: {
                    column_name:add_column
                },
            }).then(function (res) {
                console.log(res);
                if(res.data.code===200) {
                    modal("添加成功");
                    push_column_item(add_column);
                    add_column_item(add_column);
                }else{
                    modal("专栏重复！");
                }
            })
        }
    })

    /*展示标签构造器*/
    function push_label_item(add_label) {
        $(".save-label-list").append(`<div class="save-label-item" label_name=${add_label}>
            ${add_label}
        </div>`)
    }

    /*自定义标签*/
    $(".add-label-btn-in").click(function () {
        let input = $(".add-label-input").val();
        if($(".add-label-input").val()==="")
        {
            modal("不能添加空标签！");
        }else{
            let saves=$.makeArray($(".save-label-item"));

            if(saves.length===3)
            {
                modal("最多只能选择三个标签！");
            }else{
                let divbox=$(".save-label-item");
                let flag=1;
                $.each(divbox,function (index,don) {
                    if(don.innerText===input){
                        modal("不能重复添加标签！");
                        flag=0;
                    }
                })
                if(flag){
                    $(".add-label-box").hide();
                    push_label_item(input);
                    add_label(input);
                }
                $(".save-label-item").click(function () {
                    $(this).remove();
                })
            }
        }
    })

    /*搜索标签构造器*/
    function push_search_label(label_name) {
        $(".add-label-list").append(`<div class="add-label-item">
              <label>
                  <input type="checkbox" name="label_check" value=${label_name}>
                      ${label_name}
              </label>
          </div>`);
    }

    /*保存标签按钮*/
    $(".save-label-btn").click(function () {
        let ids=$.makeArray($("input[name='label_check']:checked"));
        let saves=$.makeArray($(".save-label-item"));
        if(ids.length+saves.length>3)
        {
            modal("最多只能选择3个标签");
            return;
        }

        let divbox=$(".save-label-item");
        let flag=0;
        for(let i in ids){
            flag=1;
            /*标签去重*/
            $.each(divbox,function (index,don) {
                if(don.innerText===ids[i].value){
                    modal("不能添加重复标签！");
                    flag=0;
                }
            })
            if(flag){
                $(".add-label-box").hide();
                push_label_item(ids[i].value);
            }
        }
        $(".save-label-item").click(function () {
            $(this).remove();
        })
    })

    /*搜索标签*/
    $(".search-label-btn").click(function () {
        let url='http://localhost:8080/articleServlet?action=search_label'
        axios({
            method:"GET",
            url:url,
            params:{
                search_label: $(".add-label-input").val(),
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".add-label-list").empty();
            for(let i=0;i<data1.length;i++)
            {
                push_search_label(data1[i]);
            }
        })
    })

    /*将新标签保存到数据库*/
    function add_label(label_name) {
        let url='http://localhost:8080/articleServlet?action=add_label'
        axios({
            method:"GET",
            url:url,
            params: {
                label_name:label_name,
            },
        }).then(function (res) {
            console.log(res);
        })
    }

    /*保存分类专栏按钮*/
    $(".add-column-save-btn").click(function () {
        let ids = $.makeArray($("input[name='column_check']:checked"));
        let saves=$.makeArray($(".save-column-item"));
        if(ids.length+saves.length>3)
        {
            modal("最多只能选择3个专栏！");
            return;
        }
        /*清空复选框*/
        $($("input[name='column_check']")).each(function () {
            this.checked=false;
        })

        let divbox = $(".save-column-item");
        let flag=0;
        for(let i in ids)
        {    flag=1;
            /*专栏去重*/
            $.each(divbox,function (index,don) {
                if(don.innerText===ids[i].value){
                    modal("当前专栏已存在");
                    flag=0;
                }
            })
            if(flag) {
                $(".new-column-box").hide();
                push_save_column_item(ids[i].value);
            }
        }
        /*删除已选中的分类专栏*/
        $(".save-column-item").click(function () {
            $(this).remove();
        })

    })

    /*将新专栏保存到数据库*/
    function add_column_item(column_name) {
        let url='http://localhost:8080/articleServlet?action=add_column'
        axios({
            method:"GET",
            url:url,
            params: {
                column_name:column_name,
                email:window.localStorage.getItem("email")
            },
        }).then(function (res) {
            console.log(res);
        })
    }

    /*打开新建分类专栏*/
    $(".new-column-btn").click(function () {
        get_column_list();
        $(".new-column-box").show();
    })

    /*获取已有分类专栏*/
    function get_column_list() {
        let url='http://localhost:8080/articleServlet?action=get_column_list'
        axios({
            method:"GET",
            url:url,
            params:{
                email:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".add-column-list").empty();
            for(let i=0;i<data1.length;i++)
            {
                push_column_item(data1[i]);
            }
        })
    }

    /*关闭新建分类专栏*/
    $(".new-column-icon").click(function () {
        $(".new-column-box").hide();
    })


    /*保存博客*/
    $(".publish-blog-btn").click(function () {
        let article_type=$('input:radio[name="article-type"]:checked').val();
        if(article_type===undefined){
            modal("请选择文章类型！");
            return;
        }
        if($(".blog-title").val().length<5){
            modal("文章标题不得小于5个字符");
        }else{
            const column_list=[];
            const label_list=[];
            for(let i=0,blog_column=$(".save-column-item");i<blog_column.length;i++){
                column_list.push($(blog_column[i]).attr("column_name"));
            }
            for(let i=0,blog_label=$(".save-label-item");i<blog_label.length;i++){
                label_list.push($(blog_label[i]).attr("label_name"));
            }
            const content_text=$(".editormd-preview-container").text().substring(0,200);//纯文本
            const md_id=contentEditor.getMarkdown();
            $.post("http://localhost:8080/articleServlet?action=editor_blog",{
                md_id:md_id,
                content_text:content_text,
                title:$(".blog-title").val(),
                column:column_list,
                label:label_list,
                is_original:article_type,
                blog_id:blog_id,
                is_draft:"0",
                is_check:"1"
            }, function (res) {
                console.log(res);
                location.href="ViewBlog.html?blog_id="+blog_id;
            },"json");
        }
    })

    /*模态框函数*/
    function modal(content) {
        $('.modal-body').html(content);
        $("#myModal").modal("show");
    }

    /*logo*/
    $(".navbar-brand").click(function () {
        location.href="Home.html";
    })
</script>
</body>
</html>